<script setup>
import { goCommunity,goHome} from'../../tools/go.js'
const iconslist = [
  {id:'1',img:'./static/img/community/callelevatorimg/yjht.png',name:'一键呼梯'},
  {id:'2',img:'./static/img/community/callelevatorimg/yyht.png',name:'预约呼梯'},
  {id:'3',img:'./static/img/community/callelevatorimg/wjc.png',name:'无接触乘梯'},
  {id:'4',img:'./static/img/community/callelevatorimg/ytcs.png',name:'用梯常识'},
  {id:'5',img:'./static/img/community/callelevatorimg/jjjy.png',name:'紧急救援'},
  {id:'6',img:'./static/img/community/callelevatorimg/wtfk.png',name:'问题反馈'},
]
const sectionllist = [
  {id:'1',img:"./static/img/indeximg/kjfs/left.png" ,name:'1层',age:'5层'},
  {id:'2',img:"./static/img/indeximg/kjfs/left.png" ,name:'5层',age:'1层'},
  {id:'3',img:"./static/img/indeximg/kjfs/left.png" ,name:'2层',age:'4层'},
]
</script>

<template>
  <view class="back">
    <!-- container 不用改 -->
    <view class="container">
      <view class="titli" >
        <v-icon @click="flag == 1 ? goCommunity() : goHome()" class="icon" icon="mdi-chevron-left"></v-icon>
        <h3>智能呼梯</h3>
      </view>
      <view class="search-bar">
        <view class="box">
          <v-icon class="icon" icon="mdi-magnify"></v-icon>
          <input type="text" placeholder="请输入电梯编号">
        </view>
      </view>
    </view>
    <!-- 快捷列表 -->
    <view class="shortcut-l">
      <ul class="icons">
        <li v-for="item in iconslist" :key="item.id">
          <img :src="item.img" alt="一键呼梯"> <!-- 图标需自行准备，命名为icon_one.png等 -->
          <text>{{ item.name }}</text>
        </li>
      </ul>
    </view>

    <view class="bottom-section">
      <view class="tei">
        <h4>快捷呼梯</h4>
        <text>管理</text>
      </view>

      <ul class="box">
        <li
            v-for="item in sectionllist"
            :key="item.id"
        >
          <text>{{ item.name }}</text>
          <img :src="item.img" alt="">
          <text>{{ item.age }}</text>
        </li>
        <li>
          <v-icon class="icon" icon="mdi-information-outline"></v-icon>
          <text>查看更多</text>
        </li>
      </ul>
      
      <!-- 添加的 post-icon 元素 -->
      <view class="post-icon">
        <v-icon class="icon" icon="mdi-plus-circle"></v-icon>
      </view>
    </view>

    <view class="safety-tips ">
      <h5>电梯安全小卫士</h5>
      <img src="../../static/img/community/dianti.png" alt="">
    </view>
  </view>

</template>

<style scoped lang="scss">
@use "../../static/css/title/index.css" as title;
@use "../../static/css/main";

/* 添加全局默认文本样式 */
* {
  color: #000000;
}

.back{
  @include main.useTheme() {
    /* 重置默认文本颜色，应用黑色 */
    text, h3, h4, h5, p, span, input, textarea {
      font-weight: 400;
      color: #000000;
    }
    
    .safety-tips{
      img{
        width: 100%;
        height: 200px;
      }
      h5:before{
        content: "";
        position: absolute;
        top: 3px;
        left: -8px;
        width: 6px;
        height: 24px;
        background: main.getVal(pri_color);
        border-radius: 15px;
      }
      h5{
        position: relative;
        font-weight: 400;
        font-size: 20px;
        margin-left: 12px;
        color: #000000; /* 黑色文字 */
      }
      display: flow-root;
      width: 100%;
      background: main.getVal(primary_bg_color);
      padding: 12px;
      margin: -91px 0;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    .bottom-section{
      .tei{
        h4{
          font-size: 18px;
          font-weight: 500;
          margin: 10px 0;
          color: #000000; /* 黑色文字 */
        }
        text{
          color: #000000; /* 黑色文字 */
        }
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      // 添加的 post-icon 样式
      .post-icon {
        position: absolute;
        bottom: -20px;
        right: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: main.getVal(pri_color);
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        z-index: 10;
        
        .icon {
          color: white !important; /* 保持图标白色 */
          font-size: 24px;
        }
      }

      .box{
        li:nth-child(4){
          display: flex;
          background: main.getVal(two_lv_bg_color);
          align-items: center;
          justify-content: center;
          border: 1px solid main.getVal(primary_border_color);
          
          .icon{
            color: #000000; /* 黑色图标 */
          }
        }
        li{
          text{
            font-size: 17px;
            color: #000000; /* 黑色文字 */
          }
          img{
            width: 29px;
            height: 12px;
            background-size: 100% 100%;
          }
          display: flex;
          padding: 6px;
          border-radius: 8px;
          background: main.getVal(primary_bg_color);
          text-align: center;
          line-height: 50px;
          align-items: center;
          justify-content: space-evenly;
          margin:4px;
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
        }
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }
      width: 95%;
      margin: 17px auto;
      background: main.getVal(two_lv_bg_color);
      position: relative;
      top: -90px;
      padding-bottom: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      border-radius: 12px;
    }
    //快捷方式
    .shortcut-l{
      ul{
        li{
          text{
            margin-top: 5px;
            font-size: 17px;
            color: #000000; /* 黑色文字 */
          }
          img{
            width: 70px;
            height: 70px;
          }

          display: flex;
          flex-direction: column;
          align-items: center;
        }
        padding: 12px;
        width: 95%;
        margin: -14px auto;
        border-radius: 12px;
        background: main.getVal(primary_bg_color);
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
      }
      width: 100%;
      position: relative;
      top: -100px;
    }
    .container {
      .titli{
        h3{
          color: #000000;
        }
      }
      .search-bar{
        .box{
          .icon{
            color: #666; /* 稍微淡一点的黑色图标 */
          }
          input{
            width: 85%;
            margin-left: 12px;
            color: #000000; /* 黑色文字 */
            
            &::placeholder{
              color: #999; /* 浅灰色占位符 */
            }
          }
          display: flex;
          align-items: center;
          width: 95%;
          height: 45px;
          border-radius: 55px;
          margin: 10px auto;
          background: main.getVal(primary_bg_color);
          padding: 12px;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }
      }
      width: 100%;
      height: 35vh;
      background: main.getVal(pri_color);
    }
  }
}

body{
  background: #EEEEEE;
}
</style>